<template>
	<view class="data_view box">
		<view class="total_box w100 height_112 br_8 box" :class="userType == '2'? 'juse' : 'green' " >
			<!-- <image :src="'../../../../static/images/data_back'+userType+'.png'" mode="" class="data_back"></image> -->
			<view class="total_content w100 h100 fc_fff fz_12 box">
				<view class="title">
					总业绩
				</view>
				<view class="number box pt_8 pb_12">
					￥
					<text class="fz_24">120045</text>
				</view>
				<view class="">
					退货合计：¥9809
				</view>
			</view>
		</view>
		<view class="ward_box">
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc">
				<view class="fc_999 fz_12">
					今日业绩 >
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">1900</text>
				</view>
				<view class="">
					退货：¥980
				</view>
			</view>
			<view class="single_ward mt_12   height_86 bc_fff br_8 fc_999 fz_12 fc">
				<view class="fc_999 fz_12">
					本月业绩 >
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">1900</text>
				</view>
				<view class="">
					退货：¥980
				</view>
			</view>
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc">
				<view class="fc_999 fz_12">
					上月业绩 >
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">1900</text>
				</view>
				<view class="">
					退货：¥980
				</view>
			</view>
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc">
				<view class="fc_999 fz_12">
					本年业绩 >
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">1900</text>
				</view>
				<view class="">
					退货：¥980
				</view>
			</view>
		</view>
		<view class="data_content mt_12 br_8">
			<view class="share_header data_header height_40 w100">
				<image src="/static/images/share_icon.png" mode="" class="share_icon"></image>
				<view class="ml_4 fz_16 fb fc_333">
					分享数据
				</view>
			</view>
			<view class="data_inner box bc_fff">
				<view class="single_box fc">
					<view class="fc_999 fz_12 mt_6">
						分享商品总次数（次）
					</view>
					<view class="fz_20 fb">
						1026
					</view>
				</view>
				<view class="data_line">

				</view>
				<view class="single_box fc">
					<view class="fc_999 fz_12 mt_6">
						分享商品总次数（次）
					</view>
					<view class="fz_20 fb">
						1026
					</view>
				</view>
			</view>
		</view>
		<view class="data_content mt_12">
			<view class="member_header data_header height_40 w100">
				<image src="/static/images/membe_icon.png" mode="" class="share_icon"></image>
				<view class="ml_4 fz_16 fb fc_333">
					会员数据
				</view>
			</view>
			<view class="data_inner box bc_fff">
				<view class="single_box fc">
					<view class=" title_box fc_999 fz_12 mt_6">
						<text class="mr_7">历史邀请人数</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_20 fb">
						1026
					</view>
				</view>
				<view class="data_line">

				</view>
				<view class="single_box fc">
					<view class="title_box fc_999 fz_12 mt_6">
						<text class="mr_7">今日邀请人数</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_20 fb">
						1026
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image src="/static/images/mormal_membe.png" class="member_icon" mode=""></image>
					<text class="member_name1 fz_16 fb ml_8">普通会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>1026人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						本月消费(次)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						上月消费(次)
					</view>
				</view>
				<view class="single_time percent_box red_box">
					<view class="">
						<image src="/static/images/direction／caret-up@2x.png" class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">40%</text>
					</view>
					<view class="fz_12 mt_4">
						环比下降
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image src="/static/images/vip_member.png" class="member_icon" mode=""></image>
					<text class="member_name2 fz_16 fb ml_8">尊享会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>1026人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						本月消费(次)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						上月消费(次)
					</view>
				</view>
				<view class="single_time percent_box red_box">
					<view class="">
						<image src="/static/images/direction／caret-up@2x.png" class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">40%</text>
					</view>
					<view class="fz_12 mt_4">
						环比下降
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image src="/static/images/uni_member.png" class="member_icon" mode=""></image>
					<text class="member_name3 fz_16 fb ml_8">联盟会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>1026人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						本月消费(次)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						上月消费(次)
					</view>
				</view>
				<view class="single_time percent_box red_box">
					<view class="">
						<image src="/static/images/direction／caret-up@2x.png" class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">40%</text>
					</view>
					<view class="fz_12 mt_4">
						环比下降
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image src="/static/images/business_member.png" class="member_icon" mode=""></image>
					<text class="member_name4 fz_16 fb ml_8">创业会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>1026人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						本月消费(次)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						12
					</view>
					<view class="fz_12 mt_4">
						上月消费(次)
					</view>
				</view>
				<view class="single_time percent_box red_box">
					<view class="">
						<image src="/static/images/direction／caret-up@2x.png" class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">40%</text>
					</view>
					<view class="fz_12 mt_4">
						环比下降
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {


		data() {
			return {
				userType: 2, // 1.导购员 2.店长 3.经销商
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data_view {
		background: #f6f6f6;
		@include set_padding(12rpx, 12rpx);

		.total_box {
			position: relative;

			&.juse{
				background: linear-gradient( 135deg, #FE5A1C 0%, #FE451C 100%);
			}
			&.green{
				background: linear-gradient( 135deg, #1C8845 0%, #28A256 100%);
			}
			.data_back {
				width: 100%;
				height: 100%;
				display: block;
			}

			.total_content {
				@include set_padding(12rpx, 12rpx);
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.ward_box {
			@include flex_box(row, wrap, space-between, center);

			.single_ward {
				width: calc((100% - 11px) / 2);
				@include flex_box(column, wrap, center, center);
			}
		}

		.data_content {
			.data_header {

				@include flex_box(row, nowrap, flex-start, center);
			}

			.share_header {
				background: linear-gradient(93deg, #FFF5E5 0%, rgba(255, 245, 229, 0) 100%);
			}

			.member_header {
				background: linear-gradient(93deg, #FFEEE5 0%, rgba(255, 238, 229, 0) 100%);
			}

			.share_icon {
				width: 36rpx;
				height: 36rpx;
			}

			.data_inner {
				@include flex_box(row, nowrap, flex-start, center);
				@include set_padding(16rpx, 0rpx);

				.single_box {
					width: calc((100% -2rpx) / 2);

					.title_box {
						@include flex_box(row, nowrap, center, center);
					}
				}

				.data_line {
					width: 0;
					height: 100rpx;
					border: 1rpx dashed #D7D7D7;
				}
			}
		}

		.member_content {
			@include set_padding(0rpx, 8rpx);
			padding-bottom: 16rpx;

			.member_top {
				@include flex_box(row, nowrap, space-between, center);
				@include set_padding(11rpx, 0rpx);

				.member_icon {
					width: 36rpx;
					height: 36rpx;
					display: block;
				}

				.member_name1 {
					color: #59616E;
				}

				.member_name2 {
					color: #EBB42D;
				}

				.member_name3 {
					color: #115D70;
				}

				.member_name4 {
					color: #A54F12;
				}

			}

			.header_left {
				@include flex_box(row, nowrap, flex-start, center);
			}

			.times_box {
				background: #F5F7FB;
				@include flex_box(row, nowrap, flex-start, center);

				.single_time {
					flex: 1;
					@include flex_box(column, nowrap, center, center);

					.green_arrow {
						width: 24rpx;
						height: 24rpx;
						display: inline-block;
					}
				}

				.percent_box {
					border-left: 2rpx dashed #D7D7D7;
				}

				.green_box {
					color: #00C5A8;
				}

				.red_box {
					color: #F73D3F;
				}
			}
		}
	}
</style>
